import { Component, Output, EventEmitter, OnInit, ReflectiveInjector, Inject, Injectable } from '@angular/core';
import { trigger, style, state, transition, animate, keyframes } from '@angular/animations';
import { validateConfig } from '@angular/router/src/config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [],
  animations: [
    trigger("square", [state("blue", style({ backgroundColor: 'blue', width: '100px', height: '100px', opacity: 0.1 })),
    state("red", style({ backgroundColor: 'red', width: '100px', height: '100px', opacity: 0.5, transform: 'translateX(100%)' })),
    //transition("blue => red", animate('.2s 1s cubic-bezier(.08,.79,.96,.21)')),
    transition("blue => red", animate(5000, keyframes([
      style({ transform: 'translateX(100%)' }),
      style({ transform: 'translateX(90%)' }),
      style({ transform: 'translateX(50%)' }),
      style({ transform: 'translateX(20%)' }),
      style({ transform: 'translateX(0)' }),
      style({ transform: 'translateX(-100%)' }),
      style({ transform: 'translateX(10%)' }),
      style({ transform: 'translateX(20%)' }),
      style({ transform: 'translateX(30%)' }),
      style({ transform: 'translateX(0)' }),
    ]))),
    transition("red => blue", animate('.2s 1s cubic-bezier(.08,.79,.96,.21)'))]),
  ]
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    //var injector = ReflectiveInjector.resolveAndCreate([
    //  { provide: 'id', useFactory: factory => Id.getInstance('idCard') },
    //  { provide: 'address', useFactory: factory => new Address("江苏省", "宿迁市", "宿城区", "郑楼镇") },
    //])
    //var person = new Person(Id.getInstance("idCard"), new Address("江苏省", "宿迁市", "宿城区", "郑楼镇"));
    //var person = new Person(injector.get("id"),injector.get("address"));
    //console.log(person.id, person.address);
    console.log(this.baseCfg);
  }
  constructor(@Inject('BASE_CONFIG') private baseCfg:string) {
   
  }
  squareState: string = 'blue';
  isDarkTheme: false;
  @Output()
  sidebarOpenedEvent: EventEmitter<void> = new EventEmitter<void>();
  title = 'app';
  btnClickedHandler(e) {
    this.sidebarOpenedEvent.emit();
  }
  toggleThemeBtnClickedHandler(e) {
    this.isDarkTheme = e;
    console.log(e, this.isDarkTheme);
  }
  onClick() {
    this.squareState = this.squareState == 'blue' ? 'red' : 'blue';
  }
}
//export class Person {
//  constructor(public id: Id,
//    public address: Address) { }
//}
export class Person {
  constructor(public id: Id,
    public address: Address) { }
}
@Injectable()
export class Id {
  static getInstance(type: string) {
    return new Id();
  }
}
@Injectable()
export class Address {
  constructor(private province: string,
    private city: string,
    private district: string,
    private street: string) { }
}
